<template>
	<view id="box">
		<view class="u-demo-block">
			<u-swiper
					:list="list"
					previousMargin="30"
					nextMargin="30"
					circular
					:autoplay="false"
					:interval=4000
					duration=1000
					radius="5"
					bgColor="#ffffff"
			></u-swiper>
		</view>
		<view class="font_size">推荐课程</view>
		<view class="course">
			<uni-grid :column="2" :showBorder="false" :square="true">
				<uni-grid-item v-for="(item,index) in courseList">
					<image class="icon_img" :src="item.url" style="border-top-left-radius: 20px;border-top-right-radius: 20px;"></image>
					<view class="min_box" style="border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;">
						<view class="course_title">
							<text class="text">{{item.courseName}}</text>
						</view>
						<view class="over">
							<view class="left teacher_font">{{item.trueName}}主讲</view>
							<view class="right money_font">￥{{item.courseNprice}}</view>
						</view>
						<view class="bottom_box_padding">
							<view class="left bottom_box">
								<image class="min_icon_img left" src="@/static/images/index/eye.png"></image>
								<view class="left num_font">{{item.lookNum}}</view>
							</view>
							<view class="left bottom_box">
								<image class="min_icon_img left" src="@/static/images/index/user.png"></image>
								<view class="left num_font">{{item.saleNum}}</view> 
							</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	//查看轮播图
	import {getJsCarousels} from '@/static/http/getData.js'
	//查看课程
	import {getCourses} from '@/static/http/getData.js'
	
	export default {
		data() {
			return {
				list: [],
				src: '/static/images/index/01.png',
				trueName: '赵老师',
				courseList:[
					
				]
			}
		},
		onLoad(){
			getJsCarousels().then(res => {
				var data = res.data.data;
				for (var i = 0; i < data.length; i++) {
					this.list.push({url:data[i].connect,poster:data[i].imgAddress});
					console.log(this.list);
				}
			})
			getCourses().then(res => {
				var data = res.data.data;
				for (var i = 0; i < data.length; i++) {
					var params = {
						url:'/static/images/index/01.png',
						courseName: data[i].courseName,
						trueName: data[i].trueName,
						courseNprice: data[i].courseNprice,
						lookNum: data[i].lookNum,
						saleNum: data[i].saleNum
					}
					this.courseList.push(params);
					console.log(this.list);
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	#box {
		width: 96%;
		margin: 0 auto;
	}
	.u-demo-block{
		background-color: #FFFFFF;
		margin: 2% 0;
		padding: 2% 0;
		text-align: center;
	}
	.course{
		margin: 2% 0;
		padding: 2% 0;
	}
	.font_size{
		font-size: 20px;
		font-weight: bold;
	}
	.icon_img{
		width: 96%;
		padding-bottom: 2%;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	.min_icon_img{
		width: 15px;
		height: 15px;
		padding-right: 10px;
	}
	.bottom_box{
		height: 15px;
		line-height: 15px;
		padding-right: 10px;
	}
	.bottom_box_padding{
		overflow: hidden;
		padding: 5% 0;
	}
	.min_box{
		width:90%;
		padding: 0 5px;
		margin: 0 auto;
		margin-bottom: 5%;
		background-color: #FFFFFF;
	}
	.course_title{
		height: 45px;
	}
	.left{
		float: left;
	}
	.right{
		float: right;
	}
	.over{
		overflow: hidden;
	}
	.text{
		font-size: 16px;
		font-weight: bold;
	}
	.teacher_font{
		color: #CACACA;
	}
	.money_font{
		color: #F86802;
	}
	.num_font{
		color: #7A7A7A;
	}
</style>
